<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn1">全选</button>
    <button id="btn2">全不选</button>
    <button id="btn3">反选</button>
    <div>
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
    </div>
</body>

</html>
<script>
    window.onload = function () {
        //获取button按钮的元素集合，循环绑定点击事件
        var btn = document.getElementsByTagName("button")
        //获取input
        var inputs = document.getElementsByTagName("input")
        for (var i = 0; i < btn.length; i++) {
            btn[i].onclick = function () {
                //通过this来拿到点击的这个元素
                //怎么通过这个元素去判断我实现哪个功能
                //获取元素的内容进行判断，然后去写相关功能
                if (this.innerHTML === '全选') {
                    for (var j = 0; j < inputs.length; j++) {
                        //循环的把每一个inputs的checked状态改为true
                        inputs[j].checked = true;
                    }
                } else if (this.innerHTML === '全不选') {
                    //循环的把每一个inputs的checked状态改为false
                    for (var j = 0; j < inputs.length; j++) {
                        inputs[j].checked = false;
                    }
                } else if (this.innerHTML === '反选') {
                    //已经选上的把勾去掉，然后把checked状态改为false
                    //没有选上的把勾打上，然后把checked状态改为true
                    for (var j = 0; j < inputs.length; j++) {
                        //循环把状态改变未和之前相反的状态
                        inputs[j].checked = !inputs[j].checked;
                    }

                }
            }
        }



    }
</script>